<script setup lang="ts">
import { ref } from 'vue';
import MyTable from './components/MyTable.vue'

//定义数据类型
export  interface  Person{ 
    id:number ,
    name:string ,
    age :number 
}

const list = ref<Person[]>([
  { id: 1, name: '张三', age: 18 },
  { id: 2, name: '李四', age: 19 },
  { id: 3, name: '王五', age: 17 },
])

const list2 = ref<Person[]>([
  { id: 1, name: '赵六', age: 18 },
  { id: 2, name: '田七', age: 19 },
  { id: 3, name: '老八 ', age: 17 },
])

//点击删除
const remoteItem = (obj: any) => {

  list.value = list.value.filter((v) => v.id !== obj.id)
}

//点击查看
const seeHello=(aaa:any)=>{
  
alert('你点击了我哦~')
}


</script> 

<template>
  <MyTable :data="list">
    <template #default="obj">
      <button @click="remoteItem(obj)">删掉他</button>
    </template>



  </MyTable>
  <MyTable :data="list2">
 <template #default="aaa">
  <button @click="seeHello">查看</button>
 </template>

  </MyTable>
</template>

<style scoped>
body {
  background-color: #b3b3b3;
}
</style>